<template>
    <div ref="chartRef" class="map-container"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts';
  import { onMounted, ref } from 'vue';
  import fuyangGeoJson from './fuyang.json';
  
  const chartRef = ref(null);
  
  onMounted(() => {
    const myChart = echarts.init(chartRef.value);
  
    echarts.registerMap('fuyang', fuyangGeoJson);
  
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b}'
      },
      geo: {
        map: 'fuyang',
        roam: true,
        label: {
          show: true,
          color: '#fff',
          fontSize: 12
        },
        itemStyle: {
          areaColor: '#0b2547',
          borderColor: '#00ffff'
        },
        emphasis: {
          label: {
            show: true,
            color: '#fff'
          },
          itemStyle: {
            areaColor: '#2a333d'
          }
        }
      }
    };
  
    myChart.setOption(option);
  
    // 自动适配大小
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  });
  </script>
  
  <style scoped>
  .map-container {
    width: 100%;
    height: 600px; /* 根据你的大屏区域调整 */
    background-color: #001f3f; /* 可选背景色，适配大屏风格 */
  }
  </style>
  